<template>
	<view>
		<u-navbar :is-back="true" title="我的案例" :border-bottom="false" :background="background">
			<view class="navbar-right" slot="right" @click="openinfo('/pages/tabBar/my/myCase/upCase/upCase')">
				<u-icon name="plus" color="#ffffff" slot: size="30" style="margin-right: 20rpx;"></u-icon>
			</view>
		</u-navbar>
		<view class="u-p-12">
			<u-waterfall v-model="flowList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view class="u-p-12" v-for="(item, index) in list1" :key="index">
						<u-lazy-load threshold="-450" border-radius="10" :image="url+item.images"
							@click="openinfo('/pages/tabBar/my/myCase/caseShow?id='+item.id)">
						</u-lazy-load>
						<view class="demo-title">
							{{item.title}}
						</view>
						<view class="demo-shop">
							{{$u.timeFormat(item.createtime, 'yyyy.mm.dd')}}
							<u-icon name="more-dot-fill" color="#9b9b9b" size="34" class="u-close"
								@click="showPopup(item.id)">
							</u-icon>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="u-p-12" v-for="(item, index) in list2" :key="index">
						<u-lazy-load threshold="-450" border-radius="10" :image="url+item.images"
							@click="openinfo('/pages/tabBar/my/myCase/caseShow?id='+item.id)">
						</u-lazy-load>
						<view class="demo-title">
							{{item.title}}
						</view>
						<view class="demo-shop">
							{{$u.timeFormat(item.createtime, 'yyyy.mm.dd')}}
							<u-icon name="more-dot-fill" color="#9b9b9b" size="34" class="u-close"
								@click="showPopup(item.id)">
							</u-icon>
						</view>
					</view>
				</template>
			</u-waterfall>
		</view>

		<u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#00a8ff'
				},
				url: 'http://zjmeifeng.oss-cn-beijing.aliyuncs.com/',
				// 我的案例 
				listcontent: [],
				list: [{
					text: '置顶'
				}, {
					text: '编辑'
				}, {
					text: '删除'
				}],
				show: false,
				id: '',

				oss: 'http://zjmeifeng.oss-cn-beijing.aliyuncs.com/',
				flowList: [],
				list1: [],
				list2: [],
			}
		},
		onLoad() {
			this.getlistcontent();
		},

		methods: {
			openinfo(url) {
				uni.navigateTo({
					url: url,
				});
			},
			// 操作菜单事件
			click(index) {
				console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`);
				let i = index + 1;
				if (i == 1) {
					console.log("置顶");
				} else if (i == 2) {
					console.log("编辑")
				} else if (i == 3) {
					console.log("删除");
					this.del(this.id);

				}
			},
			showPopup(id) {
				this.show = true;
				console.log(id);
				this.id = id
			},
			// 删除案例
			del(id) {
				this.$apiCase.del({
					id: id
				}).then((res) => {
					console.log("res.data.data: ", res.data);
					if (res.data.code == 1) {
						uni.showToast({
							title: "删除成功"
						})

						this.getlistcontent()
					}
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			// 获取我的案例
			getlistcontent() {
				this.$apiCase.listcontent({
					limit: '',
					page: ''
				}).then((res) => {
					console.log("res.data.data: ", res.data.data);
					this.listcontent = res.data.data.items;
					console.log("我的案例数据列表", this.listcontent);
					// 拆分images
					let arr = res.data.data.items;
					let arr1 = [],
						arr2 = [];
					for (let i = 0; i < arr.length; i++) {
						if (i % 2 == 0) {
							arr1.push(arr[i])
						} else {
							arr2.push(arr[i])
						}
					}
					for (let k in arr1) {
						let images = arr1[k].images.split(',');
						console.log(images[0]);
						arr1[k].images = this.url + images[0]
					}
					for (let k in arr2) {
						let images = arr2[k].images.split(',');
						console.log(images[0]);
						arr2[k].images = this.url + images[0]
					}
					console.log(arr1);
					console.log(arr2);
					this.list1 = arr1;
					this.list2 = arr2;

					// for(let k in this.listcontent){
					// 	let arr1 = this.listcontent[k].images.split(',');
					// 	console.log(arr1[0]);
					// 	this.listcontent[k].images = this.url + arr1[0];

					// }
					// console.log(this.listcontent)

					// let images=this.listcontent.images.split(',');
					// console.log(images);
				}).catch((err) => {
					console.log('request fail', err);
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
	}

	.u-close {
		float: right;
	}

	.blocken {
		display: inline-block;
		width: 45%;
		border: 1px solid #007AFF;
		position: relative;
		margin-top: 20rpx;
	}

	.demo-shop {
		font-size: 22rpx;
		color: #b3b3b3;
		margin-top: 5px;
	}

	.option {
		border-radius: 25rpx;
		background-color: #a7a7a7;
		opacity: .8;
		position: absolute;
		right: 20rpx;
		top: 250rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		text-align: center;
		padding: 10rpx 25rpx;
	}
</style>
